<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" />
    <title>理想生活上天猫</title>
    <script src="./js/jquery-3.6.0-min.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body,
    html {
        width: 100%;
    }

    .head {
        width: 100%;
        height: 95px;
        background-color: #fff;
        line-height: 110px;
    }

    .head img {
        height: 30%;
        margin-left: 15%;
        cursor: pointer;
    }

    .content {
        background-color: #DD2726;
        width: 100%;
    }

    .tu {
        margin: 0 15%;
        position: relative;
    }

    .tu img {
        width: 100%;
        cursor: pointer;
    }

    .biao {
        box-sizing: border-box;
        padding: 2.2%;
        height: 66%;
        width: 30%;
        background-color: #fff;
        position: absolute;
        right: 7%;
        top: 50%;
        transform: translateY(-50%);
    }

    .biao11 {
        font-weight: bold;
        font-size: 16px;
    }

    .biao11 span {
        display: inline-block;
        margin-right: 20px;
        padding: 5px 0;
        cursor: pointer;
    }

    .biao div {
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        overflow: hidden;
    }

    .biao div input {
        padding-left: 15px;
        height: 30px;
        display: block;
        outline: none;
        border: 1px solid #999;
    }

    button {
        display: block;
        height: 30px;
        cursor: pointer;
        background-color: #FF0036;
        color: white;
        font-size: 16px;
        border: none;
    }

    #zhuce {
        height: 0;
    }

    .a {
        border-bottom: 2px solid black;
    }

    .hou {
        text-align: right;
    }

    .hou span {
        cursor: pointer;
        margin-left: 20px;
    }
</style>

<body>
    <div class="head">
        <img src="https://img.alicdn.com/tfs/TB1_Gn8RXXXXXXqaFXXXXXXXXXX-380-54.png" alt="" title="天猫Tmall.com">
    </div>
    <div class="content" title="上天猫,就够了">
        <div class="tu">
            <img src="https://gw.alicdn.com/tfs/TB1kcCBSpXXXXarapXXXXXXXXXX-1190-600.png" alt="">
            <div class="biao" title="">
                <p class="biao11">
                    <span class="a">登录</span>
                    <span class="b">注册</span>
                </p>
                <div class="denglu">
                    <input type="text" placeholder="会员名/邮箱/手机号" name="name">
                    <input type="password" placeholder="请输入登录密码" name="password">
                    <button class="ddd">登录</button>
                    <p class="hou">
                        <span>忘记密码</span>
                        <span>忘记用户名</span>
                    </p>
                </div>
                <div id="zhuce">
                    <input type="text" placeholder="输入用户名" name="dname">
                    <input type="password" placeholder="请输入密码" name="dpassword">
                    <input type="password" placeholder="请再次输入密码" name="rpassword">
                    <button class="zzz">注册</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
<script>
    $('.b').on('click', function () {
        $('.b').css('border-bottom', '2px solid black')
        $('.a').css('border-bottom', 'none')
        $('#zhuce').css('height', 220)
        $('.denglu').css('height', 0)
    })
    $('.a').on('click', function () {
        $('.a').css('border-bottom', '2px solid black')
        $('.b').css('border-bottom', 'none')
        $('.denglu').css('height', 220)
        $('#zhuce').css('height', 0)
    })

    $('input').hover(function () {
        $(this).css('border', '1px solid red')
    }, function () {
        $(this).css('border', '1px solid #999')
    })
    //注册
    document.querySelector('.zzz').onclick = function () {
        var xhr = new XMLHttpRequest;
        xhr.open('post', '/api/register');
        var dname = document.querySelector('[name="dname"]').value;
        var dpassword = document.querySelector('[name="dpassword"]').value;
        var rpassword = document.querySelector('[name="rpassword"]').value;
        if (dpassword === rpassword) {
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.send(`dname=${dname}&dpassword=${dpassword}`)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var res = xhr.responseText;
                        res = JSON.parse(res)
                        console.log(res)
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000
                            }, () => {
                                document.querySelector('[name="dname"]').value = ''
                                document.querySelector('[name="dpassword"]').value = ''
                                document.querySelector('[name="rpassword"]').value = ''
                            })
                        } else if (res.code == 1) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            }, () => {
                                location.href = './login.html'
                            })
                        }
                    }
                }
            }
            return false;
        }
    }
    //登录
    document.querySelector('.ddd').onclick = function () {
        var xhr = new XMLHttpRequest;
        xhr.open('post', '/api/login');
        var name = document.querySelector('[name="name"]').value;
        var password = document.querySelector('[name="password"]').value;
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(`name=${name}&password=${password}`)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                    console.log(res)
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 1000
                        }, () => {
                            document.querySelector('[name="name"]').value = ''
                            document.querySelector('[name="password"]').value = ''
                        })
                    } else if (res.code == 1) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        }, () => {
                            localStorage.setItem("id",name)
                            location.href = './index.html'
                        })
                    }
                }
            }
            return false;
        }
    }





</script>

</html>